<template>

  <div class="main-container">
    <!-- 导航栏 -->
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
    >
      <el-menu-item index="1">
        <router-link to="/">首页</router-link>
      </el-menu-item>
      <el-submenu index="2">
        <template slot="title">分类</template>
        <el-menu-item index="2-1">电影</el-menu-item>
        <el-menu-item index="2-2">电视剧</el-menu-item>
        <el-menu-item index="2-3">综艺</el-menu-item>
      </el-submenu>
      <el-menu-item index="3">排行榜</el-menu-item>
      <div class="nav-right">
        <el-input
            placeholder="搜索视频"
            class="search-input"
            v-model="searchKeyword"
        ></el-input>
        <el-button
            type="primary"
            class="login-btn"
            @click="$router.push('/login')">
          登录/注册
        </el-button>
      </div>
    </el-menu>

    <!-- 轮播图 -->
    <el-carousel :interval="5000" height="400px">
      <el-carousel-item v-for="(item, index) in banners" :key="index">
        <img :src="item.image" class="banner-image" />
      </el-carousel-item>
    </el-carousel>

    <!-- 视频分类列表 -->
    <div class="video-list" v-for="category in categories" :key="category.title">
      <h2 class="category-title">{{ category.title }}</h2>
      <el-row :gutter="20">
        <el-col
            v-for="video in category.videos"
            :key="video.title"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
            :xl="4"
        >
          <el-card class="video-card" :body-style="{ padding: '0px' }">
            <img :src="video.cover" class="video-cover" @click="playVideo(video)" />
            <div class="video-info">
              <h3 class="video-title">{{ video.title }}</h3>
              <div class="video-stats">
                <span class="play-count">
                  <i class="el-icon-view"></i>
                  {{ video.playCount }}
                </span>
                <span class="upload-time">{{ video.uploadTime }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="footer-content">
        <p>© 2023 我的视频网站</p>
        <div class="footer-links">
          <a href="#">关于我们</a>
          <a href="#">联系我们</a>
          <a href="#">用户协议</a>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categories: [
        {
          title: "热门推荐",
          videos: [
            {
              id: 1, // 添加唯一ID
              title: "热门视频1",
              cover: "https://via.placeholder.com/300x200/FFB6C1",
              playCount: "123万",
              uploadTime: "3天前"
            },
            // 其他视频...
          ]
        },
        // 其他分类...
      ]
    };
  },
  methods: {
    playVideo(video) {
      this.$router.push({
        path: `/video/${video.id}`,
        query: {
          title: video.title,
          cover: video.cover
        }
      });
    }
  }
};
</script>

<style scoped>
.main-container {
  min-width: 1200px;
}

.nav-right {
  float: right;
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.search-input {
  width: 200px;
  margin-right: 20px;
}

.login-btn {
  margin-left: 10px;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-title {
  padding: 20px 0 10px 20px;
  color: #333;
}

.video-list {
  padding: 20px;
}

.video-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.3s;
}

.video-card:hover {
  transform: translateY(-5px);
}

.video-cover {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.video-info {
  padding: 15px;
}

.video-title {
  font-size: 14px;
  margin: 0 0 10px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-stats {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
}

.footer {
  background-color: #f5f5f5;
  padding: 30px 0;
  margin-top: 50px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.footer-links {
  margin-top: 10px;
}

.footer-links a {
  color: #666;
  margin: 0 15px;
  text-decoration: none;
}

.footer-links a:hover {
  color: #409EFF;
}
</style>